<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏商城</title>
    <link rel="stylesheet" th:href="@{/js/lib/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/js/lib/fontawesome/css/all.min.css}">
    <th:block th:replace="fragments/navbar :: navbar-style"></th:block>
    <style>
        /* 主体内容样式 */
        body {
            background: #f8f9fa;
            -webkit-tap-highlight-color: transparent;
            padding-bottom: env(safe-area-inset-bottom);
        }

        .shop-container {
            max-width: 1200px;
            margin: 2rem auto;
            padding: 20px;
        }

        /* 玩家信息卡片 */
        .player-info-card {
            background: white;
            border-radius: 12px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.1);
            padding: 20px;
            margin-bottom: 20px;
        }

        .player-score {
            font-size: 1.2em;
            font-weight: bold;
            color: #1976d2;
        }

        /* 商品卡片 */
        .item-card {
            background: white;
            border-radius: 12px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            height: 100%;
            overflow: hidden;
        }

        .item-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 4px 15px rgba(0,0,0,0.15);
        }

        .item-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

        .item-info {
            padding: 15px;
        }

        .item-name {
            font-size: 1.1em;
            font-weight: 500;
            margin-bottom: 10px;
        }

        .item-description {
            color: #666;
            font-size: 0.9em;
            margin-bottom: 15px;
        }

        .item-price {
            font-weight: bold;
            color: #1976d2;
        }

        /* 标签页样式 */
        .nav-tabs {
            border: none;
            margin-bottom: 20px;
        }

        .nav-tabs .nav-link {
            border: none;
            color: #666;
            font-weight: 500;
            padding: 10px 25px;
            border-radius: 20px;
            transition: all 0.3s ease;
        }

        .nav-tabs .nav-link.active {
            background: #1976d2;
            color: white;
        }

        /* 购买按钮 */
        .btn-purchase {
            background: linear-gradient(135deg, #1e88e5, #1565c0);
            border: none;
            color: white;
            padding: 8px 20px;
            border-radius: 20px;
            transition: all 0.3s ease;
        }

        .btn-purchase:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }

        .btn-purchase:disabled {
            background: #ccc;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .shop-container {
                margin: 1rem;
                padding: 15px;
            }

            .item-card {
                margin-bottom: 20px;
            }

            .item-image {
                height: 150px;
            }
        }
        .btn-purchase.active {
            background: #dc3545;  /* 使用红色表示已装备状态 */
        }

        .btn-purchase.active:hover {
            background: #c82333;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav th:replace="fragments/navbar :: navbar('游戏商城', 'fas fa-store')"></nav>

    <div class="shop-container">
        <!-- 玩家信息 -->
        <div class="player-info-card">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h5 class="mb-0">我的积分</h5>
                    <div class="player-score">
                        <i class="fas fa-coins me-2"></i>
                        <span id="playerScore">0</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 商城标签页 -->
        <ul class="nav nav-tabs" id="shopTabs">
            <li class="nav-item">
                <a class="nav-link active" data-bs-toggle="tab" href="#shopItems">
                    <i class="fas fa-shopping-bag me-2"></i>商城
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-bs-toggle="tab" href="#inventory">
                    <i class="fas fa-box-open me-2"></i>我的物品
                </a>
            </li>
        </ul>

        <!-- 标签页内容 -->
        <div class="tab-content">
            <!-- 商城物品 -->
            <div class="tab-pane fade show active" id="shopItems">
                <div class="row" id="itemList">
                    <!-- 商品列表将通过JavaScript动态加载 -->
                </div>
            </div>

            <!-- 已购物品 -->
            <div class="tab-pane fade" id="inventory">
                <div class="row" id="inventoryList">
                    <!-- 已购物品列表将通过JavaScript动态加载 -->
                </div>
            </div>
        </div>
    </div>

    <script th:src="@{/js/lib/jquery.min.js}"></script>
    <script th:src="@{/js/lib/bootstrap.bundle.min.js}"></script>
    <script th:src="@{/js/common.js}"></script>
    <script th:src="@{/js/shop.js}"></script>
    <script th:src="@{/js/navbar.js}"></script>
</body>
</html> 